<template>
    <div class="section product-info-bar">
        <div class="img-box">
            <img mode="aspectFill" :src="cover" />
        </div>
        <div class="info text-normal">
            <div class="name-wrap">
                <div class="name hidden-text-v2">{{name}}</div>
                <div class="spec">{{spec}}</div>
            </div>
            <div class="price text-right">
                <span v-if="count">{{count}} &times;</span>
                ¥{{priceText}}
            </div>
        </div>
    </div>
</template>

<script>
import {
    currency,
} from '@/lib/utils';

export default {
    name: 'ProductInfoBar',
    props: {
        cover: {
            type: String,
        },
        name: {
            type: String,
        },
        price: {
            type: Number,
        },
        /** 规格信息 */
        spec: {
            type: String,
        },
        /** 数量 */
        count: {
            type: Number,
        },
    },
    computed: {
        priceText() {
            return currency(this.price);
        },
    },
};
</script>

<style lang="less">
@import "../../lib/style/mixins.less";

.product-info-bar {
    display: flex;
    padding: 15rpx 30rpx;
    background-color: #ffffff;

    .img-box {
        width: 153px;
        height: 80px;
        margin-right: 26rpx;
        image {
            width: 100%;
            height: 100%;
            border-radius: 10px;
        }
    }
    .info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .name-wrap {
            flex: 1;
        }
        .spec {
            .text-small();
            color: @color-font-4;
        }
    }
}
</style>
